.work-container {
	background-image: url('~@/static/image/page-bg.png');
	background-size: 100% auto;
	background-repeat: no-repeat;
	position: relative;

	&-bg {
		position: absolute;
		z-index: 0;
		width: 405rpx;
		height: 286rpx;
		right: 0;
		top: 84rpx;
		background-image: url('~@/static/image/index-banner.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
	}

	.work-main {
		position: relative;
		.slogan {
			padding: 0 32rpx;
			height: 190rpx;
			display: flex;
			flex-direction: column;
			&-hd {
				margin-top: 22rpx;
				font-size: 36rpx;
			}
			&-bd {
				font-size: 52rpx;
			}
		}

		.action-container {
			padding: 0 32rpx;
			margin-bottom: 24rpx;
			.action-main {
				@include grid(170rpx);
				background: linear-gradient(180deg, rgba(233, 240, 255, 0.6) 0%, #ffffff 32%);
				box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(2, 23, 107, 0.05);
				border-radius: 24rpx;
				padding: 10rpx 0;
				overflow: hidden;
				backdrop-filter: blur(4rpx);
				.action {
					padding: 16rpx 0;
					display: flex;
					flex-direction: column;
					align-items: center;

					&-text {
						margin-top: 14rpx;
						font-weight: 600;
						font-size: 24rpx;
						line-height: 34rpx;
					}
				}
				.action-hidden {
					opacity: 0.2;
				}
			}
		}

		// todo 通知滚动样式
		.notice {
			padding: 0 32rpx;
			margin-bottom: 24rpx;

			&-main {
				padding: 0 24rpx;
				background-color: rgba(78, 110, 237, 0.1);
				height: 64rpx;
				border-radius: 8rpx;
			}
			&-text {
				flex: 1;
				padding-left: 16rpx;
			}
		}

		.function {
			padding: 0 32rpx;
			margin-bottom: 24rpx;
			display: flex;
			justify-content: space-between;
			&-item {
				width: 326rpx;
				height: 184rpx;
				border-radius: 24rpx;
				background-size: cover;
				background-repeat: no-repeat;
				overflow: hidden;
				&-left {
					background-image: url('~@/static/image/work-btn1.png');
				}
				&-right {
					background-image: url('~@/static/image/work-btn2.png');
				}
				&-main {
					padding-left: 24rpx;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
				}
				&-label {
					font-size: 32rpx;
					font-weight: 600;
				}
				&-desc {
					margin-top: 14rpx;
				}
			}
		}
		.course {
			padding: 0 32rpx;
			margin-bottom: 24rpx;
			&-hd {
				&-left {
					display: flex;
					align-items: flex-end;
					.title-black {
						font-size: 48rpx;
						margin-right: 24rpx;
					}
					.course-date {
						line-height: 54rpx;
					}
				}
			}
			.course-list {
				margin-top: 16rpx;
				.section-empty {
					border-radius: 24rpx;
					background-color: #ffffff;
				}
			}
			.refresh-icon {
				width: 28rpx;
				height: 28rpx;
				overflow: hidden;
			}
		}
	}
}
/* 定义旋转动画 */
@keyframes rotateAnimation {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* 应用旋转动画到元素 */
.rotating {
	animation: rotateAnimation 2s linear infinite; /* 持续时间2秒，线性速度，无限次播放 */
}
